<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ list.length }}</strong></span>
    <ul class="filters">
      <li>
        <a @click="change('全部')" :class="{selected: current == '全部' }" href="javascript:;">全部</a>
      </li>
      <li>
        <a @click="change('未完成')" :class="{selected: current == '未完成' }" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="change('已完成')" :class="{selected: current == '已完成' }" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button @click="$emit('clear')" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: {
    list: {
      required: true
    }
  },
  data() {
    return {
      current: '全部'
    }
  },
  methods: {
    change (status) {
      // 把被点的状态赋值给current，就能实现点谁谁高亮
      this.current = status
      // 多一步，通知父组件，我点了谁
      this.$emit('statusChange', status)
    }
  }
};
</script>